<template>
	<view class="wrap" v-show="!loading">
		<view class="box" 
			ref="box"
			:class="{active:current === index}"
			v-for="(item, index) in list"
			:key="index"
			@click="current = index"
		>
			<view class="box1 f30 d-c fweib">
				<image src="/static/index1/11.png" mode="widthFix"></image>
				<text>{{item.large_unit}}</text>
			</view>
			<view class="box2">
				<!-- @click="goDetail(unit.unit_id, unit.subunit)" -->
				<view 
					class="box2-1 d-b-c f30 fweib" 
					v-for="(unit, uIndex) in item.unit_list" 
					:key="uIndex"
				>
					<text>{{unit.subunit}}</text>
					<view class="box2-1-1 d-c-c">
						<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				bookId: 0,
				current: 0,
				list: [],
			};
		},
		onLoad(options) {
			this.bookId = options.bookId || 0
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...',
				})
				this.$u.post(this.$u.api.sentence, {
					bookId: this.bookId,
				}).then((res) => {
					uni.hideLoading()
					this.loading = false
					this.list = res.data
				}).catch((err) => {
					uni.hideLoading()
					this.loading = false
					console.log(err)
				})
			},
			goDetail(unitId, subunit){
				uni.navigateTo({
					url: '/pages/index/sentence/detail?unitId='+unitId+'&subunit='+subunit
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		padding: 0 30rpx;
	}
	
	.box{
		padding: 30rpx 18rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		height: 96rpx;
		box-sizing: border-box;
		overflow: hidden;
		transition:all 0.3s linear;
		cursor: pointer;
		&.active{
			height: auto;
		}
	}

	.box1{
		
		image{
			width: 40rpx;
			margin-right: 20rpx;
		}
	}
	.box2{
		width: calc(100% - 46rpx);
		margin-left: 46rpx;
		padding: 32rpx 20rpx;
		background: rgba(75,176,255,0.1);
		border-radius: 10rpx;
		margin-top: 25rpx;
		
		.box2-1{
			margin-bottom: 60rpx;
			position: relative;
			padding-left:42rpx ;
			transition: all .1s linear;
			&:hover{
				font-size: 48rpx;
				// text{
				// 	font-size: 46rpx;
				// }
			}
			&::before{
				content: '';
				display: block;
				width: 14rpx;
				height: 14rpx;
				background: #4BB0FF;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
			&::after{
				content: '';
				display: block;
				position: absolute;
				background: #4BB0FF;
				width: 1rpx;
				height: 60rpx;
				left: 7rpx;
				top: -60rpx;
			}
			
			&:nth-child(1){
				&::after{
					display: none;
				}
			}
			&:nth-last-child(1){
				margin-bottom: 0;
			}
			
			
			.box2-1-1{
				width: 40rpx;
				height: 40rpx;
				background: #4BB0FF;
				border-radius: 50%;
			}
			
		}
	}
</style>
